<#include "/admin/common/layout/__mainlayout.html"> <#assign pageCss>
<link rel="stylesheet"
	href="${contextPath}/admin/assets/css/dropzone.css" />
</#assign>
<#assign pageJavascript>
	<script src="${contextPath}/admin/assets/js/dropzone.js"></script>
	<!-- inline scripts related to this page -->
		<script type="text/javascript">
			jQuery(function($){
			
			try {
			  Dropzone.autoDiscover = false;
			  var myDropzone = new Dropzone("#dropzone" , {
			    paramName: "file", // The name that will be used to transfer the file
			    maxFilesize: 0.5, // MB
			
				addRemoveLinks : true,
				dictDefaultMessage :
				'<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> Drop files</span> to upload \
				<span class="smaller-80 grey">(or click)</span> <br /> \
				<i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>'
			,
				dictResponseError: 'Error while uploading file!',
				
				//change the previewTemplate to use Bootstrap progress bars
				previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n  <div class=\"dz-success-mark\"><span></span></div>\n  <div class=\"dz-error-mark\"><span></span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>"
			  });
			  
			   $(document).one('ajaxloadstart.page', function(e) {
					try {
						myDropzone.destroy();
					} catch(e) {}
			   });
			
			} catch(e) {
			  alert('Dropzone.js does not support older browsers!');
			}
			
			});
		</script>
</#assign>
 <@mainlayout  pageCss=pageCss pageJavascript=pageJavascript currentMenu="formFlag-formFileFlag">
<!-- pageHeader BEGAIN -->
<div class="page-header">
	<h1>
		Dropzone.js <small> <i
			class="ace-icon fa fa-angle-double-right"></i> Drag &amp; drop file
			upload with image preview
		</small>
	</h1>
</div>
<!-- pageHeader END -->

<!-- pageContent BEGAIN -->
<div class="row">
	<div class="col-xs-12">
		<!-- PAGE CONTENT BEGINS -->
		<div>
			<form action="../dummy.html" class="dropzone" id="dropzone">
				<div class="fallback">
					<input name="file" type="file" multiple="" />
				</div>
			</form>
		</div>
		<!-- PAGE CONTENT ENDS -->
	</div>
	<!-- /.col -->
</div>
<!-- pageContent END -->
</@mainlayout>
